<template>
	<view class="home"
		style="background: url('https://app.gluz.com.cn/uniappAssets/static/images/customer/top.png') no-repeat; background-size: 100% 100%;">
		<view class="userinfo">
			<view class="avatar flex-item-shrink-0 posit-relat">
				<u-image :src='IMAGE_URL+userinfo.avatar' shape="circle" style="width: 100rpx;height:100rpx;border-radius: 100rpx;border: 2rpx solid #fff;">
				  <view slot="error" style="width: 100rpx;height:100rpx;border-radius: 100rpx;border: 2rpx solid #fff;overflow: hidden;">
					  <image class="width-all height-all"  mode="scaleToFill" :src="userInfoFullChange(userInfoFull.identity_type)"></image>
				  </view>
				</u-image>
				<view class="posit-absol top-0 right-0" :class="TaskInfor&&TaskInfor.online_infor==false?'user_online':'user_online1'"></view>
				
			</view>
			<view class="username posit-relat flex-item-grow-1">
				<view class="over-hide-1" style="width: 80%;">
					<view v-if="lang=='zh'" style="font-size: 14px;word-wrap:break-word;word-break: break-all;">{{userinfo.username}}</view>
					<view v-if="lang!='zh'" style="font-size: 18px;word-wrap:break-word;word-break: break-all;">{{userinfo.username_ru}}</view>
				</view>
				<view class=""  v-if="TaskInfor&&TaskInfor.online_show==true&&TaskInfor.status=='1'">
					<view class=""  v-if="TaskInfor.online_infor==true">{{$t('接单时间')}}{{TaskInfor.online_start_hour_st}}--{{TaskInfor.online_end_hour_st}} {{$t('共')}} {{TaskInfor.online_hours}} {{$t('小时')}}</view>
					<view class="" v-if="TaskInfor.online_infor==false">{{$t('距离接单时间还有')}}{{TaskInfor.countdown}}</view>
				</view>
				<view class=""  v-if="TaskInfor&&TaskInfor.online_show==false&&TaskInfor.status=='1'">{{$t('暂无设置')}}</view>
				<view class=""  v-if="TaskInfor&&TaskInfor.status=='0'">{{$t('暂停接单')}}</view>
				<view  class="posit-absol custom-icon" style="right: 30rpx;top:0;" @click="changeSeting">
				       <image class="width-all height-all" mode="scaleToFill" src="/static/images/user/newUI/set.png"></image>
				</view>
			</view>
		</view>

		<view class="middle" style="margin-top: 10px;padding-top: 0px;">
			<view style="width: 44%;margin-left: 2.5%;position: relative;" @click="missionCenter('reward')">
				<image src='/static/images/user/newUI/wdbc.png' mode="widthFix" style="width: 100%;">
				</image>
				<view style="position: absolute; top: 10px; color: #fff;" :style="lang=='zh'?'left: 15px;':'left: 4px;'">{{$t('我的报酬')}}</view>
			</view>
			<view style="width: 44%;margin-left: 7%;position: relative;" @click="missionCenter('records')">
				<image :src='serverImageUrl("/static/images/customer/wdjl.png")' mode="widthFix" style="width: 100%;">
				</image>
				<view style="position: absolute; top: 10px;color: #fff;" :style="lang=='zh'?'left: 15px;':'left: 4px;'">{{$t('翻译记录')}}</view>
			</view>
		</view>

		<view class="lishi flex flex-both padd-0_15 z-index-10" style="margin-top: 40rpx;">
			<view style="display: flex;" class="flex-middle">
				<view>
					<image style="padding-top: 10px;" class="zhuanhuan_img" mode="widthFix"
						:src='serverImageUrl("/static/images/customer/jilu.png")' alt="" />
				</view>
				<view style="color: #ffffff;">{{$t('任务中心')}}</view>
			</view>
			<view class="flex flex-both" :style="{'width':lang=='zh'?'50%':'54%'}" style="font-size: 12px;" >
				<view class="item_styles posit-relat" v-if="lang=='zh'" :class="current==0?'item_style_add':''" @click="toggleItemClass(0)">{{$t('语音帮助')}}<u-badge type="error" size="mini" :is-center="true" :count="cate_count1"></u-badge></view>
				<view class="item_styles_ru posit-relat" v-if="lang=='ru'" :class="current==0?'item_style_add':''" @click="toggleItemClass(0)">Аудио<u-badge type="error" size="mini" :is-center="true" :count="cate_count1"></u-badge></view>
				<view class="item_styles posit-relat" v-if="lang=='zh'" :class="current==1?'item_style_add':''" @click="toggleItemClass(1)">{{$t('视频会议')}}<u-badge type="error" size="mini" :is-center="true" :count="cate_count2"></u-badge></view>
				<view class="item_styles_ru posit-relat" v-if="lang=='ru'" :class="current==1?'item_style_add':''" @click="toggleItemClass(1)">{{$t('视频会议')}}<u-badge type="error" size="mini" :is-center="true" :count="cate_count2"></u-badge></view>
			</view>
		</view>
		<view
			style="padding-left:20rpx;padding-right:20rpx; padding-top: 30rpx; padding-bottom: 30rpx;">
			<scroll-view  :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolowers()"
				:scroll-y="true" class="my-content flex-item-grow-1" lower-threshold="50" style="width: 100%;min-height: 0px;height: 60vh;">
				<u-empty v-if="!lists||lists.length==0"></u-empty>

				<div class="item" :class="(item.type==1&&item.is_real_time==1)?'item_add1':'item_add'" style="padding: 12rpx;" v-for="(item,index) in lists">
					<view style="background-color: #fff;border-radius: 24rpx;padding: 30rpx 24rpx;" v-if="item.type==2"> 
						<view style="color: #666;" class="flex flex-col width-all">
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('下单时间')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input width-all" :class="lang=='zh'?'u-text-right':'u-text-left'"><span style="font-size: 10px;">Beijing</span>{{item.create_at}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('会议开始时间')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all"><!-- start_time -->
										<view class="uni-input width-all" v-if="lang=='zh'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.start_timeValue_arr!=null?item.start_timeValue_arr.name:''}}</view>
										<view class="uni-input width-all" v-if="lang=='ru'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.start_timeValue_arr!=null?item.start_timeValue_arr.name_ru:''}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('会议时长')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input width-all" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.duration}}{{$t('分钟')}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('语言种类')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input " v-if="lang=='zh'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.request_lang}}</view>
										<view class="uni-input "  v-if="lang=='ru'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.request_lang_ru}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('专业方向')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input  width-all" v-if="lang=='zh'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.professional?item.professional.name:''}}</view>
										<view class="uni-input  width-all" v-if="lang=='ru'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.professional?item.professional.name_ru:''}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control column">
								<view class="flex marg-b-20">
									<view>{{$t('会议需求')}}
									</view>
								</view>
								<view class="form-right ">
									<view class="width-all" style="color: #9E9E9E;font-size: 24rpx;">
										<view class="uni-input width-all u-text-left" v-if="lang=='zh'">{{item.content}}</view>
										<view class="uni-input width-all u-text-left" v-if="lang=='ru'">{{item.content_ru}}</view>
									</view>		
								</view>
							</view>
							<view class="width-all" v-if="item.is_real_time==0">
								<u-button :custom-style="customStyle" hover-class="none" style="z-index: 0;" class="font-14  width-all sub" v-if="item.meet_Status=='pending'||item.meet_Status=='accepted'" :loading="submit_loading" :disabled="submit_loading" @click="submit_change(item)">{{$t('即时沟通')}}</u-button>
								<u-button :custom-style="customStyle" hover-class="none" style="z-index: 0;" class="font-14  width-all sub" v-if="item.meet_Status=='submit'"  :disabled="true"><image  style="width:36rpx;height:36rpx;overflow: hidden;display: inline-block;margin-right: 10px;" mode="widthFix" src="/static/images/user/newUI/spicon.png" alt="" />{{$t('距离会议开始')}}:{{item.countdown}}</u-button>
								<u-button :custom-style="customStyle" hover-class="none" style="z-index: 0;" class="font-14  width-all sub" v-if="item.meet_Status=='complete'" :loading="submit_loading" :disabled="submit_loading" @click="submit_changejion(item)"><image  style="width:36rpx;height:36rpx;overflow: hidden;display: inline-block;margin-right: 10px;" mode="widthFix" src="/static/images/user/newUI/spicon.png" alt="" />{{$t('进入会议')}}</u-button>
							</view>
						</view>
					</view>
					<view style="background-color: #fff;border-radius: 24rpx;padding: 30rpx 24rpx;" v-if="item.type==1">
						<view style="color: #666;" class="flex flex-col width-all">
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('下单时间')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input width-all" :class="lang=='zh'?'u-text-right':'u-text-left'"><span style="font-size: 10px;">Beijing</span>{{item.create_at}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('语音开始时间')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input width-all" v-if="lang=='zh'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.start_timeValue_arr!=null?item.start_timeValue_arr.name:''}}</view>
										<view class="uni-input width-all" v-if="lang=='ru'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.start_timeValue_arr!=null?item.start_timeValue_arr.name_ru:''}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('语音时长')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input width-all" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.duration}}{{$t('分钟')}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('语言种类')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input " v-if="lang=='zh'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.request_lang}}</view>
										<view class="uni-input "  v-if="lang=='ru'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.request_lang_ru}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control" :class="{column:lang=='ru'}">
								<view class="flex">
									<view>{{$t('专业方向')}}
									</view>
								</view>
								<view class="form-right">
									<view class="width-all">
										<view class="uni-input  width-all" v-if="lang=='zh'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.professional?item.professional.name:''}}</view>
										<view class="uni-input  width-all" v-if="lang=='ru'" :class="lang=='zh'?'u-text-right':'u-text-left'">{{item.professional?item.professional.name_ru:''}}</view>
									</view>		
								</view>
							</view>
							<view class="form-control column">
								<view class="flex marg-b-20">
									<view>{{$t('语音需求')}}
									</view>
								</view>
								<view class="form-right ">
									<view class="width-all" style="color: #9E9E9E;font-size: 24rpx;">
										<view class="uni-input width-all u-text-left" v-if="lang=='zh'">{{item.content}}</view>
										<view class="uni-input width-all u-text-left" v-if="lang=='ru'">{{item.content_ru}}</view>
									</view>		
								</view>
							</view>
							<view class="width-all" v-if="item.is_real_time==1">
								<u-button  :custom-style="customStyle" hover-class="none" style="z-index: 0;" class="font-14  width-all sub_add"  :loading="submit_loading" :disabled="submit_loading" @click="submit_change(item)">{{$t('即时沟通')}}</u-button>
							</view>
							<view class="width-all" v-if="item.is_real_time==0">
								<u-button :custom-style="customStyle"  hover-class="none" style="z-index: 0;" class="font-14  width-all sub" v-if="item.meet_Status=='pending'||item.meet_Status=='accepted'" :loading="submit_loading" :disabled="submit_loading" @click="submit_change(item)">{{$t('即时沟通')}}</u-button>
								<u-button :custom-style="customStyle"  hover-class="none" style="z-index: 0;" class="font-14  width-all sub" v-if="item.meet_Status=='submit'"  :disabled="true"><image  style="width: 28rpx;height:38rpx;overflow: hidden;display: inline-block;margin-right: 10px;" mode="widthFix" src="/static/images/user/newUI/yyicon.png" alt="" />{{$t('距离语音开始')}}:{{item.countdown}}</u-button>
								<u-button :custom-style="customStyle" hover-class="none" style="z-index: 0;" class="font-14  width-all sub" v-if="item.meet_Status=='complete'" :loading="submit_loading" :disabled="submit_loading" @click="submit_changejion(item)"><image  style="width: 28rpx;height:38rpx;overflow: hidden;display: inline-block;margin-right: 10px;" mode="widthFix" src="/static/images/user/newUI/yyicon.png" alt="" />{{$t('进入语音')}}</u-button>
							</view>
						</view>
					</view>
				</div>
			</scroll-view>


		</view>



	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL,
		HTTP_IMG_UTL,
		IMAGE_URL,
		IMAGE_PIC
	} from "@/config/app"
	import {
		createC2CConversation,
		createVoiceCall
	} from "@/common/public";
	import moment from "moment"
	export default {
		data() {
			return {
				lists: [],
				flag: false,
				is_master: 0,
				tab_select: 1,
				page: 1,
				count: 0,
				lang: getApp().globalData.lang,
				IMAGE_URL,
				userinfo: {},
				userInfoFull:{},
				wait: "/static/images/customer/wait.png",
				success: "/static/images/customer/success.png",
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				userVatar:[
					{label:'供应商',value:'0',avatar:'/uploads/20240923/4104dd20a0d9ea5679f4fc54015cd55b.png'},
					{label:'经销商',value:'1',avatar:'/uploads/20240923/4104dd20a0d9ea5679f4fc54015cd55b.png'},
					{label:'货代公司',value:'2',avatar:'/uploads/20240923/249a0c604d899295f7339462b11867a1.png'},
					{label:'采购商',value:'3',avatar:'/uploads/20240923/3c6bc313e194038a888735ae338c2e9c.png'},
					{label:'服务公司',value:'4',avatar:'/uploads/20240923/13ac638916a3bcbc54f1f22ee360bf3e.png'},
					{label:'报关公司',value:'5',avatar:'/uploads/20240923/249a0c604d899295f7339462b11867a1.png'},
					{label:'运输公司',value:'6',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'},
					{label:'国际物流公司',value:'7',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'},
					{label:'司机',value:'8',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'},
					{label:'服务商',value:'9',avatar:'/uploads/20240923/13ac638916a3bcbc54f1f22ee360bf3e.png'},
					{label:'个人',value:'10',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'},
					{label:'翻译',value:'11',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'}
				],
				cate_count1:0,
				cate_count2:0,
				current:0,
				submit_loading:false,
				intervalId:null,
				intervalTask:null,
				TaskInfor:'',
				customStyle:{
					color:'#fff',
					border:'none',
				}
				
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userInfoFull').user
			this.userInfoFull = uni.getStorageSync('userInfoFull')
			console.log(uni.getStorageSync("user_id"))
			uni.setStorageSync("user_id", this.userinfo.id)
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userInfoFull').user
			this.userInfoFull = uni.getStorageSync('userInfoFull')
			this.weidu_count();
			uni.setNavigationBarTitle({
				title: this.$t("留言板")
			})
			if(this.intervalId){
				clearInterval(this.intervalId);
				this.intervalId = null;
			}
			if(this.intervalTask){
				clearInterval(this.intervalTask);
				this.intervalTask = null;
			}
			this.Liuyan_lists()
			this.intention_update()
		},
		onUnload() {
			console.log('离开页面')
		    	if(this.intervalId){
		    		clearInterval(this.intervalId);
		    		this.intervalId = null;
		    	}
				if(this.intervalTask){
					clearInterval(this.intervalTask);
					this.intervalTask = null;
				}
		        this.lists.forEach((order) => {
		         clearInterval(order.intervalId);
		    	  order.intervalId=null
		    });
		},
		methods: {
			formatDate(value) {
			 const stamp = new Date(value)
			 const time = moment(stamp).format('x')
			 return time
			},
			absoluteDifference(a, b,type) {
				if(type==1){
					return Math.abs(a - b);
				}
			    if(type==2){
			    	return 24 - Math.abs(a - b);
			    }
			},
			intention_update(){
				this.$u.api.user.intention_query().then(async (res) => {
					console.log('intention_update',res)
					
					if(res.online_start_hour!=null){
						res.online_show=true
						let online_data_start=moment().format('YYYY/MM/DD')+' '+res.online_start_hour+':00'
						let online_data_end=moment().format('YYYY/MM/DD')+' '+res.online_end_hour+':00'
						let online_data_start1=moment(new Date()).add(1, 'days').format("YYYY/MM/DD")+' '+res.online_start_hour+':00'
						let online_data_end1=moment(new Date()).add(1, 'days').format("YYYY/MM/DD")+' '+res.online_end_hour+':00'
						if((res.online_end_hour-res.online_start_hour)>0){
							res.online_hours=this.absoluteDifference(res.online_end_hour,res.online_start_hour,1)
						}
						if((res.online_end_hour-res.online_start_hour)<0){
							res.online_hours=this.absoluteDifference(res.online_end_hour,res.online_start_hour,2)
						}
						
						res.online_start_hours=this.formatDate(online_data_start)
						res.online_start_hours1=this.formatDate(online_data_start1)
						res.online_end_hours=this.formatDate(online_data_end)
						res.online_end_hours1=this.formatDate(online_data_end1)
						res.countdown=""
						res.online_start_hour_st=res.online_start_hour+':00'
						res.online_end_hour_st=res.online_end_hour+':00'
						const now = Date.now();
						if(now < res.online_start_hours){
							let timeLeft = res.online_start_hours - now;
							if(timeLeft <0){
								res.online_infor=true
							}
							if(timeLeft >0){
								res.online_infor=false
								this.startTaskdowns(res,'')
							}
						}
						if((res.online_end_hour-res.online_start_hour)>0){
							if(now < res.online_end_hours&&now > res.online_start_hours){
								res.online_infor=true
							}
						}
						if((res.online_end_hour-res.online_start_hour)<0){
							if(now < res.online_end_hours1&&now > res.online_start_hours){
								res.online_infor=true
							}
						}
						if((res.online_end_hour-res.online_start_hour)>0){
							if(now > res.online_end_hours){
								let timeLeft = res.online_start_hours1 - now;
								if(timeLeft <0){
									res.online_infor=true
								}
								if(timeLeft >0){
									res.online_infor=false
									this.startTaskdowns(res,1)
								}
							}
						}
						if((res.online_end_hour-res.online_start_hour)<0){
							if(now > res.online_end_hours1){
								let timeLeft = res.online_start_hours1 - now;
								if(timeLeft <0){
									res.online_infor=true
								}
								if(timeLeft >0){
									res.online_infor=false
									this.startTaskdowns(res,1)
								}
							}
						}
						
					}else{
						res.online_show=false
						res.online_infor=false
					}
					this.TaskInfor=res
					if(res&&res.online_show==true&&res.status=='1'&&res.online_infor==true){
						this.initOrders()
					}
					
				})
			},
		    async	submit_changejion(v_item){
				let operateLiuyans= await this.operateLiuyanChange(v_item.id,v_item.type+1)
				if(operateLiuyans==0){
					uni.showModal({
							content: this.$t('订单已流转'),
							showCancel: false,
							confirmText: this.$t('确定'),
							success:(e)=>{
								if (e.confirm) {
									this.page=1
									this.lists=[]
									this.Liuyan_lists();
								}
							}
					})
					return false
				}
				if(v_item.type==1){
					createVoiceCall(v_item.mobile, this)
				}
				if(v_item.type==2){
					let typeUrl = '/pages/user/meetingJion/meeting?'
					uni.navigateTo({
						url: typeUrl + 'meetingRoomId=' + v_item.id + '&startMeetingId=' + v_item.user_id
					})
				}
			},
			formatTimes(ms) {
			  const seconds = Math.floor(ms / 1000);
			  const minutes = Math.floor(seconds / 60);
			  const remainingSeconds = seconds % 60;
			  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
			    .toString()
			    .padStart(2, "0")}`;
			},
			formatTime(ms) {
			  const seconds = Math.floor(ms / 1000);
			  const minutes = Math.floor(seconds / 60);
			  const hours = Math.floor(minutes / 60);  // 计算小时
			  const remainingMinutes = minutes % 60;  // 剩余的分钟数
			  const remainingSeconds = seconds % 60;  // 剩余的秒数
			
			  // 格式化输出，确保每部分为两位数
			  return `${hours.toString().padStart(2, "0")}:${remainingMinutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
			},
			startTaskdowns(order,type){
				const updateRemainingTimes =  () => {
				  const now = Date.now();
				  let timeLeft=""
				  if(type){timeLeft = order.online_start_hours1 - now;}
				  if(!type){timeLeft = order.online_start_hours - now};
				  if (timeLeft <= 0) {
					clearInterval(this.intervalTask);
					this.intervalTask=null
					order.countdown=""
					this.TaskInfor.countdown=""
					this.TaskInfor.online_infor=true
				  } else {
				    order.countdown = this.formatTime(timeLeft);
				  }
				};
				// 定时更新倒计时
				this.intervalTask = setInterval(updateRemainingTimes, 1000);
				updateRemainingTimes();
			},
			startCountdowns(order) {
				console.log('startCountdowns',order)
			  const updateRemainingTime =  () => {
				  console.log('startCountdowns1111',order)
			    const now = Date.now();
			    const timeLeft = order.meeting_endTime - now;
			    if (timeLeft <= 0) {
					 console.log('startCountdowns222',order)
				  clearInterval(order.intervalId);
				  order.intervalId=null
				  order.countdown=""
				  order.meet_Status="complete"
				this.page=1
				this.lists=[]
				this.Liuyan_lists();
			    } else {
				  console.log('startCountdowns333',order)
			      order.countdown = this.formatTime(timeLeft);
			    }
			  };
			  // 定时更新倒计时
			  order.intervalId = setInterval(updateRemainingTime, 1000);
			  updateRemainingTime();
			},
		     async	initOrders(){
				if(this.intervalId){
					clearInterval(this.intervalId);
					this.intervalId = null;
				}
				this.intervalId = setInterval(this.Liuyan_lists1, 20000);
			},	
			toggleItemClass(index){
			this.current = index;
			this.page=1
			this.lists=[]
			this.Liuyan_lists();
			},
			userInfoFullChange(v_id){
				let inforImg=''
				
				console.log(this.userVatar);
				
				let inforList=this.userVatar.filter((item)=>{
					if(v_id==item.value){
						return item
					}
				})
				return  inforImg+this.IMAGE_URL+inforList[0].avatar
			},
			//我的意向设置--跳转
			changeSeting(){
				let typeUrl='/pages/user/intentionSetting/intentionSetting'
				uni.navigateTo({
					url: typeUrl
				})
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop;
				console.log(this.old.scrollTop)
			},
			//我的报酬/翻译记录--跳转
			missionCenter(type) {
				if(this.intervalId){
					clearInterval(this.intervalId);
					this.intervalId = null;
				}
				if(this.intervalTask){
					clearInterval(this.intervalTask);
					this.intervalTask = null;
				}
				this.lists.forEach((order) => {
				     clearInterval(order.intervalId);
					  order.intervalId=null
				});
				let typeUrl = ''
				//if(type=='reward')typeUrl='/pages/user/intentionSet	ting/intentionSetting'
				if (type == 'reward') typeUrl = '/pages/user/reward/reward'
				if (type == 'records') typeUrl = '/pages/user/records/records'
				uni.navigateTo({
					url: typeUrl
				})
			},
		async	submit_change(v_item){
			       let operateLiuyans= await this.operateLiuyanChange(v_item.id,v_item.type+1)
					if(operateLiuyans==0){
						uni.showModal({
								content: this.$t('订单已流转'),
								showCancel: false,
								confirmText: this.$t('确定'),
								success:(e)=>{
									if (e.confirm) {
										this.page=1
										this.lists=[]
										this.Liuyan_lists();
									}
								}
						})
						return false
					}
					createVoiceCall(v_item.mobile, this)
			},
			Liuyan_list_count(v_current) {
				return new Promise((resolve,reject)=>{
					this.$u.api.basic.getLiuyan({
						nowlang: getApp().globalData.lang,
						user_id: this.userinfo.id,
						page: 1,
						size:10000,
						type:v_current
					}).then(res => {
						resolve(res.length)
					})
				})
			},
		async	Liuyan_lists() {
				this.cate_count1=await  this.Liuyan_list_count(1)
				this.cate_count2=await  this.Liuyan_list_count(2)
				this.$u.api.basic.getLiuyan({
					nowlang: getApp().globalData.lang,
					user_id: this.userinfo.id,
					page: this.page,
					type:this.current+1
				}).then(res => {
					console.log(res)
					if (this.page == 1) {
						res.map((item)=>{
							item.intervalId=null
							item.countdown=""
							if (item.meet_Status === 'submit') {
							  this.startCountdowns(item);
							}
						})
						this.lists = res
					} else {
						res.map((item)=>{
							item.intervalId=null
							item.countdown=""
							if (item.meet_Status === 'submit') {
							  this.startCountdowns(item);
							}
						})
						var list1 = res
						if (res) {
							this.lists = [...this.lists, ...list1]
						}
					}
				})
			},
		async	Liuyan_lists1() {
			        this.cate_count1=  await  this.Liuyan_list_count(1)
					this.cate_count2=  await  this.Liuyan_list_count(2)
				    this.page=1
					this.lists=[]
					this.$u.api.basic.getLiuyan({
						nowlang: getApp().globalData.lang,
						user_id: this.userinfo.id,
						page: this.page,
						type:this.current+1
					}).then(res => {
							console.log('每20秒進行輪詢',res)
							if (this.page == 1) {
								res.map((item)=>{
									item.intervalId=null
									item.countdown=""
									if (item.meet_Status === 'submit') {
									  this.startCountdowns(item);
									}
								})
								this.lists = res
							} else {
								res.map((item)=>{
									item.intervalId=null
									item.countdown=""
									if (item.meet_Status === 'submit') {
									  this.startCountdowns(item);
									}
								})
								var list1 = res
								if (res) {
									this.lists = [...this.lists, ...list1]
								}
							}
						})
			},
			my_Liuyan() {
				this.$u.api.basic.my_Liuyan({
					nowlang: getApp().globalData.lang,
					user_id: uni.getStorageSync('user_id'),
					page: this.page
				}).then(res => {
					console.log(res)
					if (this.page == 1) {
						this.lists = res
					} else {
						var list1 = res
						if (res) {
							this.lists = [...this.lists, ...list1]
						}
					}
				})
			},
			yishouli() {
				var that = this
				this.$u.api.basic.yishouli({
					nowlang: getApp().globalData.lang,
					user_id: uni.getStorageSync('user_id'),
					page: this.page
				}).then(res => {
					console.log(res)
					if (that.page == 1) {
						that.lists = res
					} else {
						var list1 = res
						if (res) {
							that.lists = [...that.lists, ...list1]
						}
					}
				})
			},
			scrolltolowers(e) {
				if (this.lists.length === 0) {
					return
				}
				this.page++
				this.Liuyan_lists()
			},
			chakan(id, mobile, index) {
				var that = this
				this.$u.api.basic.query_Liuyan({
					nowlang: getApp().globalData.lang,
					user_id: uni.getStorageSync('user_id'),
					id: id,
				}).then(res => {
					if (res == 1) {
						createC2CConversation(mobile, this)
					} else {
						uni.showToast({
							title: that.$t('留言已被处理')
						})
					}

					setTimeout(function() {
						that.lists.splice(index, 1)
					}, 2000)
				})
			},
			weidu_count() {
				var that = this
				setInterval(function() {
					that.$u.api.basic.weidu_count().then(res => {
						console.log(res)
						that.count = res
						that.flag = true
					})
				}, 120000)
			},
		async	tiaozhuan(id, mobile, index) {
				let operateLiuyans= await this.operateLiuyanChange(id)
				if(operateLiuyans==0){
					uni.showModal({
							content: this.$t('订单已流转'),
							showCancel: false,
							confirmText: this.$t('确定'),
							success:(e)=>{
								if (e.confirm) {
									this.Liuyan_lists()
								}
							}
					})
					return false
				}
				uni.setStorageSync('customer_message_board_id', id);
				createC2CConversation(mobile, this)
			},
			zanwei() {
				uni.showToast({
					icon: "none",
					title: this.$t("暂未开放")
				})
			},
		async	jieshu(id, item, index) {
				var that = this;
				if (item.end_time != 0) return;
				if(item.end_time == 0){
					uni.showModal({
							content: this.$t('确定结束?'),
							confirmText: this.$t('是'),
							cancelText: this.$t('否'),
							success:(e)=> {
								if (e.confirm) {
									uni.showLoading({
										title: that.$t('加载中')
									})
									uni.request({
										url: HTTP_REQUEST_URL + "/basic/endLiuyan",
										method: 'POST',
										data: { 
											user_id: uni.getStorageSync('user_id'),
											id: id,
											lang: uni.getStorageSync("lang"),
											},
										header: {
											xzdToken: uni.getStorageSync("xzdToken")
										},
										success: (response) => {
											uni.hideLoading();
											if(response.data.data===0){
												uni.showModal({
														content: this.$t('订单已流转'),
														showCancel: false,
														confirmText: this.$t('确定'),
														success:(respose1)=>{
															if (respose1.confirm) {
																console.log('res33333',respose1)
																that.page = 1;
																that.scrollTop = this.old.scrollTop;
																that.$nextTick(() => {
																	console.log(that.scrollTop)
																	that.scrollTop = 0;
																})
																that.Liuyan_lists();
															}
														}
												})
												return false
											}
											uni.hideLoading();
											that.lists[index]['end_time'] = 1
											uni.showToast({
												icon: "none",
												title: that.$t("操作成功")
											})
											that.page = 1;
											that.scrollTop = this.old.scrollTop;
											that.$nextTick(() => {
												console.log(that.scrollTop)
												that.scrollTop = 0;
											})
											that.Liuyan_lists();
										}
									})
							    }
							}
							
					})
				}
				

			},
		async	call(mobile, id) {
				let operateLiuyans= await this.operateLiuyanChange(id)
				if(operateLiuyans==0){
					uni.showModal({
							content: this.$t('订单已流转'),
							showCancel: false,
							confirmText: this.$t('确定'),
							success:(e)=>{
								if (e.confirm) {
									this.Liuyan_lists()
								}
							}
					})
					return false
				}
				
				let that = this
				
				let firstChar = mobile.slice(0, 1);
				if (firstChar == 1) {
					uni.makePhoneCall({
						phoneNumber: mobile,
						success: (res) => {
							that.operateLiuyan(id, 1)
						},
						fail: (err) => {}
					})
				} else if (firstChar == 9) {
					uni.makePhoneCall({
						phoneNumber: '+7' + mobile,
						success: (res) => {
							that.operateLiuyan(id, 1)
						},
						fail: (err) => {}
					})
				} else if (firstChar == 8) {
					uni.makePhoneCall({
						phoneNumber: '+7' + mobile.slice(1),
						success: (res) => {
							that.operateLiuyan(id, 1)
						},
						fail: (err) => {}
					})
				} else if (firstChar == 7) {
					uni.makePhoneCall({
						phoneNumber: '+' + mobile,
						success: (res) => {
							that.operateLiuyan(id, 1)
						},
						fail: (err) => {}
					})
				} else {
					uni.makePhoneCall({
						phoneNumber: mobile,
						success: (res) => {
							that.operateLiuyan(id, 1)
						},
						fail: (err) => {}
					})
				}
			},
			operateLiuyanChange(id,type) {
				return new Promise((resolve,reject)=>{
					this.$u.api.basic.operateLiuyan({
						id: id,
						user_id: uni.getStorageSync('user_id'),
						operate_type: type
					}).then(res => {
						console.log('4444',res)
						resolve(res)
					})
				})
			},
			operateLiuyan(id, type) {
				var that = this
				that.$u.api.basic.operateLiuyan({
					id: id,
					user_id: uni.getStorageSync('user_id'),
					operate_type: type
				}).then(res => {
					console.log('123123213',res)
					this.Liuyan_lists()
					// uni.showToast({
					// 	icon:"none",
					// 	title:this.$t("操作成功")
					// })
				})
			}
		}

	}
</script>

<style lang="less">
	.u-tabs{
		touch-action: manipulation;
	}
	.form-right{
		color: #333333;
		font-size: 26rpx;
		font-weight: 400;
	}
	.user_online{
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background-color:#FF3129 ;
		border: 2rpx solid #fff;
	}
	.user_online1{
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background-color:#06C36E ;
		border: 2rpx solid #fff;
	}
	.item_styles{
		padding: 12rpx 30rpx;
		border-radius: 30rpx;
		border: 1rpx solid #fff;
		color: #fff;
		text-align: center;
	}
	.item_styles_ru{
		padding: 12rpx 0rpx;
		border-radius: 30rpx;
		border: 1rpx solid #fff;
		width: 180rpx;
		color: #fff;
		text-align: center;
	}
	.item_style_add{
		background-color: #0055B2;
		border: 1rpx solid #0055B2;
		color: #fff;
	}
	.sub {
		background-image: linear-gradient(to bottom, #4BADFD, #2B61EB);
		height: 46px;
		line-height: 46px;
		text-align: center;
		color: #fff;
		margin: auto;
		margin-top: 15px;
		border-radius: 10px;
	}
	.sub_add {
		background-image: linear-gradient(to bottom, #44FFAB, #06C36E);
		height: 46px;
		line-height: 46px;
		text-align: center;
		color: #fff;
		margin: auto;
		margin-top: 15px;
		border-radius: 10px;
	}
	.lang_bz_mobile {
		width: 133rpx;
		height: 48rpx;
		border-radius: 48rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 22rpx;
		color: #005EAC;
		background-color: #FFFFFF;
	}

	.lang_bz_but {
		width: 305rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #FF5D5D;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;

	}

	.lang_bz_but1 {
		width: 305rpx;
		height: 60rpx;
		border-radius: 60rpx;

		background: #06C36E;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;

	}

	.lang_bz_bt {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 48rpx;
	}

	.lang_bz_b {
		width: 100%;
		min-height: 341rpx;
		padding: 30rpx 30rpx 23rpx 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 32rpx;
	}

	.lang_bz_l {
		width: 100%;
		height: 72rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.lang_bz {
		border-radius: 32rpx;
		margin: 0 auto;
		width: 690rpx;
		min-height: 413rpx;
		background: linear-gradient(90deg, #CCD6FF -2%, #4A70FC 105%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.between_ql {
		//width: 133rpx;
		padding-left: 5px;
		padding-right: 5px;
		height: 48rpx;
		border-radius: 48px;
		font-size: 22rpx;
		background: #FFFFFF;
		text-align: center;
		line-height: 48rpx;
		color: #745343;
	}

	.item_block1 {
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #FF5D5D;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.item_block2 {
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #4988FD;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.item_block3 {
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #06C36E;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.item_dis {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 44rpx;
	}

	.item_utils_styles {
		width: 100%;
		display: flex;
		color: #9E9E9E;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.item_utils_style {
		color: #9E9E9E;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.item_bottom {
		width: 100%;
		//min-height: 555rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		padding: 30rpx;
	}

	page {
		background-color: #f5f5f5;
	}

	.home {
		width: 100%;
		position: relative;
		height: 50vh;
	}

	.userinfo {
		position: relative;
		display: flex;
		padding-top: 40rpx;
		margin-left:30rpx;
		height: 180rpx;
	}

	.middle {
		width: 96%;
		position: relative;
		display: flex;
		padding-top: 40rpx;
		margin-left: 2%;
	}

	.username {
		color: #fff;
		line-height: 50rpx;
		margin-left: 15px;
	}

	.item{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 30rpx;
	
	}
	.item_add{
		background-image: url(/static/images/user/newUI/task.png);
	}
	.item_add1{
		background-image: url(/static/images/user/newUI/task1.png);
	}
	.form-control {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #666666;
		font-size: 26rpx;
		font-weight: 500;
		margin-bottom: 40rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.icon {
		border-radius: 50%;
		width: 50rpx;
		height: 50rpx;
		background-color: #ddd;
		margin-right: 8rpx;
		overflow: hidden;

		image {
			width: 100%;
		}
	}

	.nickname {
		font-size: 28rpx;
		color: #3d3d3d;
		font-weight: bold;
	}

	.btn {
		background-color: #000;
		color: #fff;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15rpx 25rpx;
		border-radius: 5rpx;
	}

	.info {
		padding-bottom: 15rpx;
		margin-bottom: 15rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.message {
		padding-bottom: 24rpx;
		font-size: 26rpx;
		border-bottom: 1rpx solid #f5f5f5;
		color: #3d3d3d;
		margin-bottom: 15rpx;
		line-height: 40rpx;
	}

	.flag {
		image {
			width: 50rpx;
		}
	}

	.time {
		color: #666;
		font-size: 24rpx;
	}

	.time-text {
		margin-left: 8rpx;
	}

	.h1 {
		color: #3d3d3d;
		font-weight: bold;
		font-size: 22rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 8rpx;
		background: linear-gradient(111deg, #D7F09D 0%, #F8FCF1 86%), #D8D8D8;
		border-radius: 20rpx 0 20rpx 0;
	}

	.tab {
		width: 100%;
		height: 100rpx;
		display: flex;
	}

	.tab_view {
		width: 50%;
		text-align: center;
		line-height: 100rpx;
		color: #999999;
		font-size: 16px;
	}

	.tab_on {
		font-size: 16px;
		color: #3d3d3d !important;
		font-weight: bold;
	}

	.tab_on1 {
		border-bottom: 1px #000 solid;
	}

	.lishi {
		display: flex;
		font-size: 18px;
	}

	.zhuanhuan_img {
		width: 20px;
		height: 20px;
		margin: 5px;
	}

	.operate_img {
		width: 20px;
		height: 20px;
		margin: 5px;
	}

	.is_end {
		background-color: #999999 !important;
	}
	.custom-icon{
		width: 50rpx;
		height:50rpx;
		overflow: hidden;
		
	}
	.column {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
</style>